<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>{{ title }}</title>

    <style>
        {{ code_css }}

        h1 {
            text-align: center;
        }

        h2, h3, h4 {
            margin-block-end: 0px;
        }

        p {
            overflow: auto;
        }

        .indent {
            margin-left: 20px;
            overflow: auto;
        }

        .margined-div {
            margin-block-start: 1em
        }

        .exec-status {
            color: black;
            padding: 10px 10px;
            margin: 1px;
            border-radius: 4px;
            float: left;
        }

        .exec-finished {
            background-color: green;
        }

        .exec-failed {
            background-color: red;
        }

        .collapsible-content {
          padding: 0 18px;
          display: none;
          overflow: hidden;
        }

    </style>
</head>

<body>
    <h1> EOExecution Report </h1>

    <h2> EOWorkflow dependency graph </h2>

    <div class="indent">
        <img src="data:image/png;base64,{{ dependency_graph | safe }}" />
    </div>

    <h2> Execution status </h2>

    <div class="indent">

        <ul>
            <li>
                Start time: {{ general_stats['start_time'] | datetime }}
            </li>
            <li>
                End time: {{ general_stats['end_time'] | datetime }}
            </li>
            <li>
                Duration: {{ timedelta(general_stats['start_time'], general_stats['end_time']) }}
            </li>
            <li>
                Number of finished executions: {{ general_stats['finished'] }}
            </li>
            <li>
                Number of failed executions: {{ general_stats['failed'] }}
            </li>
            <li>
                Number of workers: {{ general_stats['workers'] }}
            </li>
        </ul>

        <p>
            {% for execution in execution_results %}
                <a class="exec-status {{ 'exec-failed' if execution.workflow_failed() else 'exec-finished' }}"
                   title="Execution {{ execution_names[loop.index - 1] }}"
                   href="#execution{{ loop.index }}"
                ></a>
            {% endfor %}
        </p>

        <div class="indent">
            <a class="exec-status exec-finished"></a> &nbsp;... Execution successfully finished
        </div>
        <div class="indent">
            <a class="exec-status exec-failed"></a> &nbsp;... Execution failed because of an error
        </div>

        {% if exception_stats %}
        <h3> Summary of exceptions </h3>

        <div class="indent">
            <ul>
            {% for node_name, node_uid, error_summary_list in exception_stats %}
                <li>
                    <b>{{ node_name }} ({{ node_uid }}):</b>
                    <ul>
                    {% for error_summary in error_summary_list %}
                        <li>
                            {{ error_summary.num_failed }} times: {{ error_summary.origin }}
                            <br>
                            Example message: <pre>{{ error_summary.example_message }}</pre>
                            <br>
                            <button class="collapsible">Failed executions</button>
                            <div class="collapsible-content">
                                <ul>
                                    {% for idx, execution in error_summary.failed_indexed_executions %}
                                    <li><a href="#execution{{ idx }}">{{ execution }}</a></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </li>
                    {% endfor %}
                    </ul>
                </li>
            {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>

    <h2> EONodes </h2>

    <div class="indent">

        {% for task in task_descriptions %}
            <h3 id="{{ task['uid'] }}"> {{ task['name'] }} </h3>

            <div class="indent">
                <b>Execution duration:</b> {{ task['duration_report'] }} <br>

                <h4> Initialization parameters </h4>
                {% if  task['args'] %}
                    <ul>
                        {% for key, value in task['args'].items() %}
                            <li> <pre> {{ key }} = {{ value }} </pre> </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <div class="indent">
                        <p>
                            No initialization parameters
                        </p>
                    </div>
                {% endif %}
            </div>
        {% endfor %}
        </div>

    </div>

    <h2> Execution details </h2>

    <div class="indent">
        {% for execution in execution_results %}
            <h3 id="execution{{ loop.index }}"> Execution {{ execution_names[loop.index - 1] }} </h3>

            <div class="indent">
                Statistics<br/>
                <ul>
                    <li>Start time: {{ execution.start_time | datetime }}</li>
                    <li>End time: {{ execution.end_time | datetime }}</li>
                    <li>Duration: {{ timedelta(execution.start_time, execution.end_time) }}</li>
                </ul>
                {% if execution.workflow_failed() %}
                    {% set error_node = execution.stats[execution.error_node_uid] %}
                    Error in task <a href="#{{error_node.node_uid}}"> {{ error_node.node_name }} ({{ error_node.node_uid }})</a>:<br/>
                    {{ execution_tracebacks[loop.index - 1] }}
                {% endif %}

                {% if execution_logs %}
                    <button class="collapsible">Logs</button>
                    <div class="collapsible-content">
                      <pre>{{ execution_logs[loop.index - 1] }}</pre>
                    </div>
                {% else %}
                    {% set logs_filename = execution_log_filenames[loop.index - 1] %}
                    Logs: <a href="{{ logs_filename }}">{{ logs_filename }}</a>
                {% endif %}
            </div>
        {% endfor %}
    </div>

    <script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
    </script>

</body>
</html>
